<template>
  <div>
    <el-dialog :title="projectName+'---用户配置'" :close-on-click-modal="false" v-model="dialogFormVisible" :before-close="closeDialog" v-on:open="loadAccount">
      <el-button type="primary" @click.native.prevent="openAccountDialog" size="small"><i class="el-icon-plus"></i>选择用户
      </el-button>
      <el-table
        v-loading="loading"
        :data="accountList">
        <el-table-column
          type="index" width="80"
          label="序号">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名">
        </el-table-column>
        <el-table-column
          prop="roleName"
          label="角色">
        </el-table-column>
        <el-table-column
          prop="mobile"
          label="手机">
        </el-table-column>
        <el-table-column
          prop="status"
          inline-template
          label="状态">
          <template>
            {{row.active == 0 ? '停用' : '启用'}}
          </template>
        </el-table-column>
        <el-table-column
          inline-template
          label="操作">
          <template>
            <el-popover
              ref="popover_"
              placement="top"
              >
              <p><i class="el-alert__icon el-icon-warning red"></i>确定要移除吗？</p>
              <div style="text-align: right; margin: 0">
                <el-button type="primary" size="mini" @click.native.prevent="toDo('removeAccount',row.id);">
                  确定
                </el-button>
              </div>
            </el-popover>
            <el-button type="text" v-popover:popover_ size="small">移除</el-button>
            <el-popover
              ref="popover_2"
              placement="top"

            >
              <p><i class="el-alert__icon el-icon-warning red"></i>确定要{{row.status == 1 ? '停用' : '启用'}}吗？</p>
              <div style="text-align: right; margin: 0">
                <el-button type="primary" size="mini" @click.native.prevent="toDo('activeAccount',row.id);">
                  确定
                </el-button>
              </div>
            </el-popover>
            <el-button type="text" v-popover:popover_2 size="small">{{row.status == 1 ? '停用' : '启用'}}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer" style="text-align: right;padding-bottom:10px;">
        <el-button type="primary" @click="accountsDialogShow=true" style="margin-bottom: 10px">
          <i class="el-icon-plus"></i>选择用户
        </el-button>
        <el-button @click="closeDialog">关闭</el-button>
      </div>
    </el-dialog>
    <!--选择用户-->
    <accounts-dialog :dialog-form-visible="accountsDialogShow" :site-id="siteId"></accounts-dialog>
  </div>
</template>
<script>
  import http from '../../../api/http'
  import AccountsDialog from './accounts.dialog.vue'

  export default {
    data() {
      return {
        currentSiteId:'',
        form: {},
        loading: false,
        activeName: 'first',
        accountList: [],
        accountsDialogShow: false
      }
    },
    props: {
      dialogFormVisible: {
        type: Boolean,
        default: function () {
          return false
        }
      }, projectId: {
        type: String
      }, projectName: {
        type: String
      },
      siteId:{
        type:String
      }
    },
    computed: {},
    methods: {
      closeDialog() {
        this.$parent.closeConfigAccountsDialog();
      },
      openAccountDialog() {
        this.currentSiteId = this.siteId;
        this.accountsDialogShow = true;
      },
      closeAccountDialog() {
        this.accountsDialogShow = false;
      },
      loadAccount() {
        var vm = this;
        vm.loading = true;
        http.postData(vm, "/pt/project/account/" + vm.projectId, {}, function (resp) {
          var ret = resp.body;
          if (ret.code == '111') {
            vm.accountList = ret.value;
          }
          vm.loading = false;
        });
      },
      selectedAccounts(res) {
        var vm = this;
        if (res != null && res.length > 0) {
          var ids = new Array();
          res.forEach(function (o) {
            ids.push(o.id);
          });
          http.postData(vm, "/pt/project/addAccount/" + vm.projectId, {json: JSON.stringify(ids)}, function (resp) {
            var ret = resp.body;
            if (ret.code == '111') {
              vm.loadAccount();
              vm.$message({type: 'success', showClose: true, message: ret.msg});
            }
          });
        }
      },
      toDo(method_, id) {
        var vm = this;
        http.postData(vm, "/pt/project/" + method_ + "/" + vm.projectId + "-" + id, {}, function (resp) {
          var ret = resp.body;
          if (ret.code == '111') {
            vm.loadAccount();
            vm.$message({type: 'success', showClose: true, message: ret.msg});
          } else {
            vm.$message({type: 'error', showClose: true, message: ret.msg});
          }
          vm.loading = false;
        });
      },
    },
    components: {
      AccountsDialog
    },
    created() {
      var vm = this;

    }
  }
</script>
<style>
</style>
